<template>
    <div class="index">
        <div class="breadcrumb-def"><el-breadcrumb separator="/">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>固定资产</el-breadcrumb-item>
            </el-breadcrumb></div>
        <div class="search-def">
            <el-input size="small" style="width: 250px;" v-model="parameter.name"
                placeholder="卡片编号/资产名称/资产标签号"></el-input>
       
            <el-input size="small" style="width: 200px;" v-model="parameter.dep_name" placeholder="部门名称"></el-input>
            <el-input size="small" style="width: 200px;" v-model="parameter.weizhi" placeholder="存放位置"></el-input>
            <el-input size="small" style="width: 200px;" v-model="parameter.type_name" placeholder="资产类别"></el-input>
            <el-date-picker size="small" style="width: 240px;" :unlink-panels="true" v-model="parameter.dd"
                type="daterange" range-separator="至" start-placeholder="使用时间" end-placeholder="使用时间">
            </el-date-picker>
            <el-button size="small" @click="searchDataEv()" type="primary">查询</el-button>
            <!-- <el-button size="small" @click="getSelectEvent1()" type="primary">打印</el-button> -->
            <el-button size="small" @click="showPrintEV" type="primary">打印</el-button>
        </div>
        <div class="vxe-table-def"><vxe-table :column-config="{resizable: true}" show-overflow ref="xTable1" height="100%" align="center" :data="tableData"
                v-loading="loading" element-loading-text="拼命加载中">
                <vxe-column type="seq" width="60"></vxe-column>
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column field="id" title="资产ID"></vxe-column>
                <!-- <vxe-column field="itemcode" title="资产编号"></vxe-column> -->
                <vxe-column field="docno" title="卡片编号"></vxe-column>
                <vxe-column field="assetname" title="资产名称"></vxe-column>
                <vxe-column field="qty" title="数量"></vxe-column>
                <vxe-column field="print_qty" title="打印数量" width="220">
                    <template #default="{ row }">
                        <el-input-number v-model="row.print_qty" :min="0" :max="1000" label="打印数量"></el-input-number>
                    </template>
                </vxe-column>
                <vxe-column field="spc" title="规格型号"></vxe-column>
                <vxe-column field="mingpai" title="铭牌"></vxe-column>
                <vxe-column field="biaoqianhao" title="资产标签号"></vxe-column>
                <vxe-column field="shiwuname" title="实物名称"></vxe-column>
                <vxe-column field="dd" title="使用时间"></vxe-column>
                <vxe-column field="dep_name" title="使用部门"></vxe-column>
                <vxe-column field="weizhi" title="存放位置"></vxe-column>
                <vxe-column field="dichangweizhi" title="资产位置"></vxe-column>
                <vxe-column field="type_name" title="资产类别"></vxe-column>

            </vxe-table></div>
        <div class="page-def"><vxe-pager v-if="tableData.length > 0" :loading="loading"
                :current-page="this.parameter.page" :page-size="this.parameter.pageSize" :total="this.parameter.total"
                :page-sizes="[50, 100, 300, 500, 1000]"
                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                @page-change="handlePageChange">
            </vxe-pager></div>

        <vxe-modal v-model="showPrint" show-zoom resize title="选择打印模板">
            <template #default>
                <div class="print-i" v-for="(itm, index) in printTemplateList" :key="index">
                    <div>{{ itm.name }}</div>
                    <div><el-button type="text" size="small" @click="editEv(itm)">编辑</el-button></div>
                    <div><el-button type="text" size="small" @click="cloneEv(itm)">复制</el-button></div>
                    <div>
                        <el-popconfirm placement="top-end" @confirm="deleteEv(itm.id)" title="确定永久删除此模板吗？">
                            <el-button slot="reference" type="text" size="small">删除</el-button>
                        </el-popconfirm>
                    </div>
                    <div><el-button size="small" @click="printDateEv(itm.name, itm.type)" type="text">打印</el-button>
                    </div>
                </div>
                <!-- <div class="print-i">
                    <div>02长春博达汽车零部件有限公司</div>
                    <div><el-button size="small" @click="getSelectEvent2" type="primary">打印</el-button></div>
                </div> -->

            </template>
        </vxe-modal>

        <vxe-modal v-model="showEdit" show-zoom resize title="修改打印抬头">
            <template #default>
                <div style="display: flex; align-items: center; justify-content: center;">
                    <div>
                        <el-input size="small" style="width: 250px;" v-model="editName"
                            placeholder="请输入抬头名称"></el-input>
                    </div>
                    <div>
                        <el-button size="small" @click="editSuerEv()" type="primary">确认</el-button>
                    </div>
                </div>
            </template>
        </vxe-modal>

        <vxe-modal v-model="showClone" show-zoom resize title="复制打印模板">
            <template #default>
                <div style="display: flex; align-items: center;  justify-content: center;">
                    <div>
                        <el-input size="small" style="width: 250px;" v-model="cloneName"
                            placeholder="请输入抬头名称"></el-input>
                    </div>
                    <div>
                        <el-button size="small" @click="cloneSuerEv()" type="primary">确认</el-button>
                    </div>
                </div>
                <!-- <div class="print-i">
                    <div>02长春博达汽车零部件有限公司</div>
                    <div><el-button size="small" @click="getSelectEvent2" type="primary">打印</el-button></div>
                </div> -->

            </template>
        </vxe-modal>
    </div>
</template>

<script>
import { hiprint } from "vue-plugin-hiprint";
import panelcode02 from '@/utlis/printTemplate/panel02.js'
import panelcode03 from '@/utlis/printTemplate/panel03.js'
import { dateFormatsa } from '@/utlis/FunctionUtils.js'

export default {
    name: 'fixedAssets',
    components: {},
    data() {
        return {
            loading: false,
            text: '',
            tableData: [],
            parameter: {
                name: '',
                dep_name: '',
                type_name: '',
                weizhi: '',
                dd: '',
                page: 1,
                pageSize: 300,
                total: 0
            },
            showPrint: false,
            // 打印卡片
            hiprintTemplatecode01: new hiprint.PrintTemplate({ template: panelcode02 }),
            hiprintTemplateChangSha: new hiprint.PrintTemplate({ template: panelcode03 }),
            // 打印模板列表
            printTemplateList: [],
            showEdit: false,
            showClone: false,
            editId: '',
            editName: '',
            cloneId: '',
            cloneName: '',
            cloneType: 1,
        }
    },
    async mounted() {

    },
    methods: {
        async searchDataEv() {
            this.parameter.page = 1
            await this.searchEv()
        },
        async searchEv() {
            let parameterData = {}
            console.log(this.parameter.dd);
            if (this.parameter.dd) {
                parameterData.dd_start = dateFormatsa(this.parameter.dd[0], 'YYYY-MM-DD')
                parameterData.dd_end = dateFormatsa(this.parameter.dd[1], 'YYYY-MM-DD')
            }
            parameterData.name = this.parameter.name
            parameterData.dep_name = this.parameter.dep_name
            parameterData.type_name = this.parameter.type_name
            parameterData.weizhi = this.parameter.weizhi
            parameterData.page = this.parameter.page
            parameterData.pageSize = this.parameter.pageSize

            this.tableData = []
            this.loading = true
            try {
                const arr_data = await this.BaseFixedAssetsListGet(parameterData)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                this.tableData = arr_data.data.result.data
                this.parameter.total = arr_data.data.result.total

                this.text = '正在拼命加载中...'
                this.loading = false
                this.$message.success({
                    showClose: true,
                    message: '查询成功'
                })
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '查询接口请求失败',
                    duration: 0
                })
            }


        },
        async handlePageChange({ currentPage, pageSize }) {
            this.parameter.page = currentPage
            this.parameter.pageSize = pageSize
            await this.searchEv()
        },
        printEv() {
            let selectRecords = this.$refs.xTable1.getCheckboxRecords()
            if (selectRecords.length == 0) {
                this.$message.error({
                    showClose: true,
                    message: '请选择需要打印的数据',
                    duration: 0
                })
                return
            }
            this.showPrint = true
        },
        getSelectEvent1(name) {
            let selectRecords = this.$refs.xTable1.getCheckboxRecords()
            if (selectRecords.length == 0) {
                this.$message.error({
                    showClose: true,
                    message: '请选择需要打印的数据',
                    duration: 0
                })
                return
            }
            this.showPrint = false
            let printDatacode = []
            this.hiprintTemplateChangSha.printPanels[0].printElements.forEach(element => {
                if (element.options.field == 'rem') {
                    element.options.title = '备　　注'
                }

            });
            selectRecords.forEach(itm => {
                for (let index = 0; index < itm.print_qty; index++) {
                    printDatacode.push({
                        title: name,
                        assetname: itm.assetname,
                        spc: itm.spc,
                        docno: itm.docno,
                        dd: itm.dd,
                        mingpai: itm.mingpai,
                        biaoqianhao: itm.biaoqianhao,
                        shiwuname: itm.shiwuname,
                        dep_name: itm.dep_name,
                        weizhi: itm.weizhi,
                        rem: itm.rem,
                        qty: itm.shiwu_qty,
                        code: itm.docno + ';' + itm.biaoqianhao
                    })
                }

            });
            // console.log(selectRecords)
            this.hiprintTemplateChangSha.print(printDatacode)
            // this.hiprintTemplatecode01.toPdf(printDatacode, "导出pdf");
        },

        getSelectEvent2(name) {
            let selectRecords = this.$refs.xTable1.getCheckboxRecords()
            if (selectRecords.length == 0) {
                this.$message.error({
                    showClose: true,
                    message: '请选择需要打印的数据',
                    duration: 0
                })
                return
            }
            this.showPrint = false
            let printDatacode = []
            this.hiprintTemplatecode01.printPanels[0].printElements.forEach(element => {
                if (element.options.field == 'rem') {
                    element.options.title = '资产编号'
                }

            });
            selectRecords.forEach(itm => {
                for (let index = 0; index < itm.print_qty; index++) {
                    printDatacode.push({
                        // title: name,
                        // assetname: itm.assetname,
                        // spc: itm.spc,
                        // docno: itm.docno,
                        // dd: itm.dd,
                        // mingpai: itm.mingpai,
                        // biaoqianhao: itm.itemcode,
                        // shiwuname: itm.assetname,
                        // dep_name: itm.dep_name,
                        // weizhi: itm.dichangweizhi,
                        // rem: itm.rem,
                        // qty: 1,
                        // code: itm.docno + ';' + itm.shiwu_id
                        title: name,
                        assetname: itm.assetname,
                        spc: itm.spc,
                        docno: itm.docno,
                        dd: itm.dd,
                        mingpai: itm.mingpai,
                        biaoqianhao: itm.biaoqianhao,
                        shiwuname: itm.shiwuname,
                        dep_name: itm.dep_name,
                        weizhi: itm.weizhi,
                        rem: itm.itemcode,
                        qty: 1,
                        code: itm.docno + ';' + itm.biaoqianhao
                    })
                }

            });
            // console.log(selectRecords)
            // console.log('11')
            // console.log(this.hiprintTemplatecode01.printPanels[0].printElements)
           
            this.hiprintTemplatecode01.print(printDatacode)
            // this.hiprintTemplatecode01.toPdf(printDatacode, "导出pdf");
        },

        async showPrintEV() {
            this.getPrintTemplateEv()
            this.showPrint = true
        },
        // 查询打印模板
        async getPrintTemplateEv() {

            try {
                const arr_data = await this.PrintTemplateGet()
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.loading = false
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                this.printTemplateList = arr_data.data.result
            } catch (error) {
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '查询接口请求失败',
                    duration: 0
                })
            }
        },
        // 修改打印抬头名称
        editEv(row) {
            this.showEdit = true
            this.editId = row.id
            this.editName = row.name
        },
        // 复制打印模板
        cloneEv(row) {
            this.showClone = true
            this.cloneId = row.id
            this.cloneName = row.name
            this.cloneType = row.type
        },
        async editSuerEv() {
            let data = {}
            data.id = this.editId
            data.name = this.editName
            try {
                const arr_data = await this.PrintTemplatePut(data)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                await this.getPrintTemplateEv()
                this.showEdit = false
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '修改接口请求失败',
                    duration: 0
                })
            }
        },
        async cloneSuerEv() {
            let data = {}
            data.id = this.cloneId
            data.name = this.cloneName
            data.type = this.cloneType
            try {
                const arr_data = await this.PrintTemplatePost(data)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                await this.getPrintTemplateEv()
                this.showClone = false
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '修改接口请求失败',
                    duration: 0
                })
            }
        },
        async deleteEv(rowId) {
            let data = {}
            data.id = rowId
            try {
                const arr_data = await this.PrintTemplatDelete(data)
                console.log(arr_data)
                if (arr_data.status == 202) {
                    this.$message.error({
                        showClose: true,
                        message: arr_data.data.msg,
                        duration: 0
                    })
                    return
                }
                if (arr_data.status !== 200) {
                    this.$message.error({
                        showClose: true,
                        message: '查询失败',
                        duration: 0
                    })
                    return
                }
                await this.getPrintTemplateEv()
                this.showClone = false
            } catch (error) {
                this.loading = false
                if (error.response.status == 401) {
                    this.$message.error({
                        showClose: true,
                        message: 'token过期请重新登录',
                        duration: 0
                    })
                    return
                }
                this.$message.error({
                    showClose: true,
                    message: '修改接口请求失败',
                    duration: 0
                })
            }
        },
        async printDateEv(name, type_z) {
            if (type_z == 1) {
                console.log(213)
                await this.getSelectEvent1(name)
            } else if (type_z == 2) {
                console.log(333)
                await this.getSelectEvent2(name)
            }
            else {
                this.$message.error({
                    showClose: true,
                    message: '打印模板类型错误请联系管理员',
                    duration: 0
                })
            }
        }

    }
}
</script>

<style lang='less' scoped>
.index {
    height: 100%;
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
    // background-color: red;
}

.breadcrumb-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    // background-color: white;
}

.search-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
}

.page-def {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
    background-color: white;
}

.vxe-table-def {
    height: calc(100% - 120px);
}

.print-i {
    display: flex;
    border-bottom: 1px solid gray;
    height: 50px;
    line-height: 50px;
    font-size: 15px;
    justify-content: space-between;
}
</style>